<template>
	<view class="goods-item" @tap="toDetail">
		<view class="goods-images">
			<image class="goods-img" src="@/static/images/common/error.png" v-if="errorImg" />
			<image class="goods-img" :src="item.pic" @load="loade" v-else />
			<view class="loading" v-if="loading">
				<view class="load-item pink"></view>
				<view class="load-item red"></view>
				<view class="load-item orange"></view>
				<view class="load-item yell"></view>
			</view>
		</view>
		<view class="goods-content">
			<view class="goods-name">
				<image v-if="item.shoptype == 1" class="shop-logo" src="@/static/icons/tmall.png" />
				<image v-else class="shop-logo" src="@/static/icons/taobao.png" />
				{{ item.title }}
			</view>
			<view class="goods-info">
				<view class="discount">
					<view class="coupon">
						<view class="circle-left"></view>
						<view class="circle-right"></view>
						{{ item.couponMoney }}元券
					</view>
					<block v-for="(perm, index) in permInfo.common" :key="index">
						<view class="subsidy" v-if="perm.name === 'isShelf' && perm.status === 1">
							<view class="circle-left"></view>
							<view class="circle-right"></view>
							<text v-if="item.isTljCommunityGood === 1">补贴¥{{ item.mdMoney | Fixed(2) }}</text>
							<text v-else>补贴¥{{ item.allowanceMoney | Fixed(2) }}</text>
						</view>
					</block>
				</view>
			</view>
			<view style="margin-top:10rpx">
				<view class="goods-price">
					<view class="deal">
						到手价
						<view class="text">
							¥
							<text class="text-2" v-if="item.isTljCommunityGood === 1">{{
								(item.endPrice - Number(item.mdMoney) - Number(item.tljMoney) < 0
								? 0
								: item.endPrice - Number(item.mdMoney) - Number(item.tljMoney)) | Fixed(2)
								}}</text>
							<text class="text-2" v-else>{{
								(item.endPrice - Number(item.allowanceMoney) < 0
									? 0
									: item.endPrice - Number(item.allowanceMoney)) | Fixed(2)
							}}</text>
						</view>
					</view>
					<view class="original">
						<view class="tlj-money" v-if="item.isTljCommunityGood === 1">
							<image class="red-back" src="@/static/images/common/red-back.png"></image>
							淘礼金红包{{ Number(item.tljMoney) | Fixed(2) }}元
						</view>
						<text class="text">¥{{ item.price | Fixed(2) }}</text>
					</view>
				</view>
				<view class="sale">销量{{ item.sale | formatMyriadNum }}</view>
			</view>
		</view>
	</view>
</template>

<script>
const Alibcsdk = uni.requireNativePlugin('UZK-Alibcsdk');
import { mapGetters } from 'vuex';
export default {
	name: 'GoodsItem',
	components: {},
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		},
		type: {
			type: String,
			default: () => {
				return '';
			}
		}
	},
	data() {
		return {
			errorImg: false,
			loading: true
		};
	},
	computed: {
		...mapGetters(['permInfo'])
	},
	created() {
		if (uni.getSystemInfoSync().platform === 'ios') {
			let reg = /.webp/;

			if (reg.test(this.item.pic)) {
				this.errorImg = true;
			}
		}
	},
	methods: {
		loade(e) {
			this.loading = false;
			if (e.detail.height === 1 && e.detail.width === 1) {
				this.errorImg = true;
			}
		},
		toDetail() {
			if (this.type === 'superGoods') {
				let query = {
					type: 'superGoods',
					title: this.item.title
				};
				if (this.item.isFirstOrder) {
					query.isFirstOrder = true;
					query.allowanceMoney = this.item.allowanceMoney;
				}
				uni.setStorageSync('goodsInfo', this.item);
				this.$Router.push({
					path: '/pages/goods/detail',
					query: query
				});
			} else {
				let query = {
					gid: this.item.gid,
					title: this.item.title
				};
				if (this.item.isFirstOrder) {
					query.isFirstOrder = true;
					query.allowanceMoney = this.item.allowanceMoney;
				}
				console.log(this.item.isTljCommunityGood)
				if (this.item.isTljCommunityGood === 1) {
					if (!uni.getStorageSync('token')) {
						uni.navigateTo({
							url: '/pages/common/login',
							animationType: 'slide-in-bottom',
							animationDuration: 300
						});
						return false;
					}
					
					// 多联盟分发
					this.$service.shopping.goods.tljCommunityActivity({
						isTljCommunityGood: 1,
						gid: this.item.gid
					}).then(res => {
						if (res.tljBatchId) {
							let params = {
								app: 'hf',
								mdGoodId: this.item.mdGoodId,
								gid: this.item.gid,
								type: res.type,
								mdMoney: res.mdMoney,
								tljMoney: res.tljMoney,
								tljBatchId: res.tljBatchId
							};
						
							this.$service.shopping.goods.tljCommunityBuy(params).then(resBuy => {
								Alibcsdk.init(
										initResult => {
											if (initResult.status) {
												uni.showLoading({
													title: '正在打开淘宝...'
												})
												setTimeout(() => {
													uni.hideLoading()
												}, 5000)
												Alibcsdk.openurl({
													url: resBuy,
												}, result => {
												});
											} else {
												uni.showToast({
													title: "初始化失败",
													icon: 'none'
												});
											}
										})
							}).catch(err => {
								uni.showToast({
									title: err.message,
									icon: 'none'
								})
							});
						} else {
							uni.showToast({
								title: '该商品已抢完~',
								icon: 'none'
							})
						}
					})
				} else {
					this.$Router.push({
						path: '/pages/goods/detail',
						query: query
					});
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-item {
	width: 100%;
	background: $color-white;
	@include flexBox(space-between);
	.goods-images {
		width: 240rpx;
		height: 240rpx;
		border-radius: 8rpx;
		overflow: hidden;
		@include flexBox(center, center);
		.goods-img {
			max-width: 100%;
			max-height: 100%;
		}
		.loading {
			position: absolute;
			width: 100%;
			height: 100%;
			@include flexBox(center)
			.load-item {
				width: 20rpx;
				height: 100rpx;
				margin: 0 10rpx;
				border-radius: 50rpx;
				&.pink {
					background: #fb889b;
					animation: pink 0.8s infinite;
				}
				&.red {
					background: #fb8888;
					animation: red 0.8s infinite;
				}
				&.orange {
					background: #fba488;
					animation: orange 0.8s infinite;
				}
				&.yell {
					background: #fbc188;
					animation: yell 0.8s infinite;
				}
			}
		}
	}
	.goods-content {
		height: 260rpx;
		flex: 1;
		overflow: auto;
		padding-left: 30rpx;
		@include flexBox(space-between, null, column);
		.goods-name {
			font-size: 28rpx;
			color: $text-black;
			position: relative;
			@include ellipsis(2);
			.shop-logo {
				height: 36rpx;
				width: 36rpx;
				position: relative;
				top: 8rpx;
				right: 5rpx;
			}
		}
		.goods-info {
			@include flexBox(space-between, center);
			.discount {
				display: flex;
				.coupon {
					padding: 0rpx 18rpx;
					background: $main-color;
					border-radius: 4rpx;
					display: inline;
					font-size: 24rpx;
					color: $color-white;
					position: relative;
					margin-right: 20rpx;
				}
				.subsidy {
					padding: 0rpx 18rpx;
					background: #ffeed1;
					border-radius: 4rpx;
					display: inline;
					font-size: 24rpx;
					color: #925114;
					position: relative;
				}
				.circle-left {
					width: 12rpx;
					height: 12rpx;
					background: #fff;
					position: absolute;
					border-radius: 50%;
					top: 50%;
					margin-top: -6rpx;
					left: -6rpx;
				}
				.circle-right {
					width: 12rpx;
					height: 12rpx;
					background: #fff;
					position: absolute;
					border-radius: 50%;
					top: 50%;
					margin-top: -6rpx;
					right: -6rpx;
				}
			}
		}
		.sale {
			font-size: 24rpx;
			color: #b5b5b5;
		}
		.goods-price {
			color: $text-grey-default;
			font-size: 24rpx;
			@include flexBox(null, flex-end);
			.line {
				width: 2rpx;
				height: 30rpx;
				background: $text-grey-default;
				margin: 0 20rpx;
			}
			.deal {
				.text {
					color: #f70114;
					font-size: 28rpx;
					margin-right: 16rpx;
					font-weight: 600;
					line-height: 1;
					.text-2 {
						font-size: 36rpx;
					}
				}
			}
			.original {
				font-size: 24rpx;
				.tlj-money {
					margin-left: -24rpx;
					border: 2rpx solid #FF0014;
					color: #FF0014;
					border-radius: 50rpx;
					background: #FFF0ED;
					padding: 0 10rpx;
					font-size: 24rpx;
					@include flexBox(flex-start, center);
					.red-back {
						width: 23rpx;
						height: 26rpx;
						margin-right: 4rpx;
					}
				}
				.text {
					color: #b5b5b5;
					text-decoration: line-through;
				}
			}
		}
	}
}
@keyframes scale_cicle {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.15);
	}

	100% {
		transform: scale(1);
	}
}
@keyframes pink {
	0% {
		margin-top: -16rpx;
	}

	50% {
		margin-top: 16rpx;
	}

	100% {
		margin-top: -16rpx;
	}
}
@keyframes red {
	0% {
		margin-top: 16rpx;
	}

	50% {
		margin-top: -16rpx;
	}

	100% {
		margin-top: 16rpx;
	}
}
@keyframes orange {
	0% {
		margin-top: -16rpx;
	}

	50% {
		margin-top: 16rpx;
	}

	100% {
		margin-top: -16rpx;
	}
}
@keyframes yell {
	0% {
		margin-top: 16rpx;
	}

	50% {
		margin-top: -16rpx;
	}

	100% {
		margin-top: 16rpx;
	}
}
</style>
